<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="app">
    <input type="checkbox" v-model="isMember" @change="calc"> 
    是否为会员<div v-if="isMember">
      会员等级：<select v-model="level" @change="calc">
        <option value="baiying">白银会员</option>
        <option value="huangjin">黄金会员</option>
        <option value="zhuanshi">钻石会员</option>
      </select>
    </div>
    <div>
        {{ isMember ? 
          `${levelText}欢迎您！` : 
          '欢迎您尊敬的顾客！' 
        }}
      </div>
    数量：<input type="number" v-model.number="num" value="1" @input="calc"> {{ num }}
    单价：<input type="number" v-model.number="price" value="1" @input="calc"> {{ price }}
    <div v-if="num && price">
     <div> 尊敬的顾客，你购买的数量是{{num}},单价是{{price}},折扣：{{dis}}, 总价：{{total}} </div>
    </div>
  </div>
  <script>
    Vue.createApp({
      data() {
        return {
          isMember: false, 
          level: 'silver', 
          num: 1,
          price: 1,
          levelText: '白银会员',
          dis: 1.0,      
          total: 1.0
        }
      },
      methods: {
        calc() {
          if (this.isMember) {
            const cfg = { 
              baiying: ['白银会员', 0.9], 
              huangjin: ['黄金会员', 0.7], 
              zhuanshi: ['钻石会员', 0.5] 
            }[this.level];
            [this.levelText, this.dis] = cfg;
          } else {
            this.dis = 1.0;
          }
          this.total = (this.num * this.price * this.dis).toFixed(2);
        }
      },
      mounted() { this.calc() }
    }).mount('#app')
  </script>
</body>
</html>